<!DOCTYPE html>
<!-- saved from url=(0091)file:///C:/Users/LALH/Desktop/PPT%20-%20%E5%89%AF%E6%9C%AC/PPT/console%20and%20debug.html#/ -->
<html class=" js no-mobile desktop no-ie chrome chrome62 c:-section users-section lalh-section desktop-section ppt%20-%20%e5%89%af%e6%9c%ac-section ppt-section w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded" id="console%20and%20debug-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script><link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css"><script type="text/javascript" src="./葡萄藤PPT_files/marked.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/markdown.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/notes.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/highlight.js.下载"></script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
    <div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.768857);">
        <section class="present" style="top: 133px; display: block;">
          <h2>【JS-task1】<span style="text-transform:lowercase">如何理解JS中作用域</span></h2>
            <h3>小课堂</h3>
            <p>分享人:李劲宏</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 3px; display: block;">
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 267px; display: block;">
            <h3>1.背景介绍</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p>任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>2.知识剖析</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
               <p>1.全局作用域(Global Scope)</p><p>
            </p><p style="text-align: left;"> 在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
              <p style="text-align: left;">(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：</p>
            <pre>            <code class="hljs php">
<span class="hljs-keyword">var</span> aName=<span class="hljs-string">"二营长"</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doSomething</span><span class="hljs-params">()</span></span>{
    <span class="hljs-keyword">var</span> bName=<span class="hljs-string">"意大利炮"</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">innerSay</span><span class="hljs-params">()</span></span>{
        alert(bName);
    }
    innerSay();
}
alert(aName); <span class="hljs-comment">//二营长</span>
alert(bName); <span class="hljs-comment">//脚本错误</span>
doSomething(); <span class="hljs-comment">//意大利炮</span>
innerSay() <span class="hljs-comment">//脚本错误</span>
            </code>
            </pre>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
             <p style="text-align: left;">(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：</p>
            <pre>            <code class="hljs php">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doSomething</span><span class="hljs-params">()</span></span>{
    bName=<span class="hljs-string">"张大彪"</span>;
    alert(bName)
}
alert(bName); <span class="hljs-comment">//张大彪</span>
            </code>
            </pre>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
           <p>(3)所有window对象的属性拥有全局作用域</p>
            <p style="text-align: left;">一般情况下，window对象的内置属性都都拥有全局作用域，例如window.name、window.top等等。</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
           <p>1. 局部作用域(Local Scope)</p>
            <p style="text-align: left;">和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
              <p style="text-align: left;">例如下列代码中的bName和函数innerSay都只拥有局部作用域：</p>
            <pre>            <code class="hljs php">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doSomething</span><span class="hljs-params">()</span></span>{
    <span class="hljs-keyword">var</span> bName=<span class="hljs-string">"李云龙"</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">innerSay</span><span class="hljs-params">()</span></span>{
        alert(bName);
    }
    innerSay();
}
alert(bName); <span class="hljs-comment">//脚本错误</span>
innerSay(); <span class="hljs-comment">//脚本错误</span>
            </code>
            </pre>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
             <p style="text-align: left;">闭包</p>
            如何从外部读取局部变量？
            出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
            那就是在函数的内部，再定义一个函数。
            <pre>            <code class="hljs php">
                　<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">f1</span><span class="hljs-params">()</span></span>{
                　　　　<span class="hljs-keyword">var</span> n=<span class="hljs-number">999</span>;
                　　　　<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">f2</span><span class="hljs-params">()</span></span>{
                　　　　　　alert(n); <span class="hljs-comment">// 999</span>
                　　　　}
                　　}
            </code>
            </pre>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p style="text-align: left;">闭包</p>
            在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
            既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
           <pre>            <code class="hljs nimrod">
                　function f1(){
                　　　　<span class="hljs-keyword">var</span> n=<span class="hljs-number">999</span>;
                　　　　function f2(){
                　　　　　　alert(n);
                　　　　}
                　　　　<span class="hljs-keyword">return</span> f2;
                　　}
                　　<span class="hljs-keyword">var</span> <span class="hljs-literal">result</span>=f1();
                　　<span class="hljs-literal">result</span>(); // <span class="hljs-number">999</span>
            </code>
            </pre>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
           <p style="text-align: left;">闭包的概念</p>
            闭包就是能够读取其他函数内部变量的函数。
            由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
            所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p style="text-align: left;">闭包的注意点</p>
            1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
            2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>7.参考文献</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p><a href="http://blog.163.com/zhangmihuo_2007/blog/static/27011075201452522824347/" target="_blank">月上西楼博客</a></p>
            <p><a href="http://ms.csdn.net/geek/67969?hmsr=toutiao.io&amp;utm_medium=toutiao.io&amp;utm_source=toutiao.io" title="">w3school</a>博客</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>8.更多讨论</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p></p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p><small>BY : 沁修 | 王义山</small></p>
        </section>

    </div>
<div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 0px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px);">
            【F12Console的用法，以及如何Debug程序】
            小课堂【郑州第43期】
            分享人：李劲宏
        </div></div>

<script src="./葡萄藤PPT_files/head.min.js.下载"></script>
<script src="./葡萄藤PPT_files/reveal.js.下载"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>


Contact GitHub API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Status He</body></html>